import React, { useState } from 'react';
import { Text, View, TouchableOpacity, Image } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';
import { AntDesign } from '@expo/vector-icons';
import { useAuth } from '../context/AuthProvider';

const Item = ({children,style,...rest}) => {
    return (
      <TouchableOpacity {...rest} style={[style,{flexDirection:'row',alignItems:'center',justifyContent:'flex-start'},]}>
        <AntDesign name={style.name} size={24} color={'#000'} style={{marginLeft:20}} />
        <Text style={{marginLeft:20,color:style.color?style.color:'#fff'}}>{children}</Text>
      </TouchableOpacity>
    )
  }

const Mine = ({navigation}) => {
    const {user} = useAuth();
    const [log,setLog] = useState(false)

    useFocusEffect(
		React.useCallback(() => {
			isLogin()
		},[user])
	)

    const isLogin = () => {
        let arr = Object.keys(user)

        if(arr.length === 0) {
            setLog(false)
        }else{
            setLog(true)
        }
    }

    const handleLogin = () => {
        navigation.navigate('Login')
    }
	
	return (
		<View style={{backgroundColor:'#eee'}}>
            {
                log?
                <View>
                    <View style={{backgroundColor:'#0099ff',height:200,flexDirection:'row',alignItems:'center',justifyContent:'flex-start'}}>
                        <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
                            <View style={{width:80,height:80,marginLeft:20,backgroundColor:'#aaa',borderRadius:40,alignItems:'center',justifyContent:'center'}}>
                                <Image
                                    style={{width: 80, height: 80, borderRadius:40}}
                                    source={{uri:`http://8.142.171.141:8080/school-news/user/img?path=${user.avatar}`}} 
                                />
                            </View>
                            <View style={{marginLeft:20}}>
                                <Text style={{fontSize:20,color:'#fff'}}>用户名：{user.userName}</Text>
                                <Text style={{fontSize:16,color:'#fff'}}>昵称：{user.nickName}</Text>
                                <Text style={{fontSize:14,color:'#fff'}}>签名：{user.userSignature}</Text>
                            </View>
                        </View>
                    </View>

                    <View>
                        <View style={{marginTop:20,alignItems:'center',justifyContent:'flex-start'}}>
                            <Item style={{name:'staro',width:'100%',height:50,marginTop:5,color:'#000',backgroundColor:'#fff'}}>我的收藏</Item>
                            <Item style={{name:'book',width:'100%',height:50,color:'#000',backgroundColor:'#fff'}}>我的投稿</Item>
                            <Item style={{name:'eyeo',width:'100%',height:50,color:'#000',backgroundColor:'#fff'}}>我的关注</Item>
                            <Item style={{name:'team',width:'100%',height:50,color:'#000',backgroundColor:'#fff'}}>我的好友</Item>
                        </View>
                        <View style={{marginTop:20,alignItems:'center',justifyContent:'flex-start'}}>
                            <Item style={{name:'setting',width:'100%',height:53,marginTop:5,color:'#000',backgroundColor:'#fff'}}>个人设置</Item>
                            <Item style={{name:'message1',width:'100%',height:55,color:'#000',backgroundColor:'#fff'}}>意见反馈</Item>
                        </View>
                    </View>
                </View>
                :
                <View style={{backgroundColor:'#0099ff',height:200,flexDirection:'row',alignItems:'center',justifyContent:'flex-start'}}>
                    <View style={{flexDirection:'row',justifyContent:'flex-start',alignItems:'center'}}>
                        <View style={{width:80,height:80,marginLeft:20,backgroundColor:'#aaa',borderRadius:40,alignItems:'center',justifyContent:'center'}}>
                            <AntDesign name='user' size={44} color={'#000'} />
                        </View>
                        <Text style={{marginLeft:20,fontSize:20}} onPress={handleLogin}>点击登录</Text>
                    </View>
                </View>
            }
		</View>
	)
}

export default Mine;